<!DOCTYPE html>
<html>
<head>


<style>
.svg-main {
    width: 700px;
    margin: 30px auto;
    position: relative;
}
svg#svga {
    position: absolute;
    top: 0;
    left: auto;
    bottom: auto;
    right: auto;
}

.st2{fill:none;stroke:#cccccc;stroke-width:1;}
.sd1{fill:none;stroke:#000000; stroke-width:3; stroke-linecap:round;}
.sd3{fill:none;stroke:#000000; stroke-width:3; stroke-linecap:round;}


</style>

</head>
<body>




<div class="svg-main">
<svg id="svga" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="600px" height="600px" viewBox="0 0 150 310">
  
  
  <g class="st2">
 <path id="loop-normal" d="m 28.83721,51.162785 c 11.581906,13.999 51.375449,-34.568101 58.518863,-25.97519 11.086356,13.335931 -39.152817,25.16828 -56.587949,57.176361 -12.473282,22.898924 19.931121,-5.088031 40.965492,-7.481448 9.709744,-1.104832 5.196147,14.588434 -7.12222,25.07076 -6.150002,5.233352 7.404541,17.130712 22.836609,13.676212 37.697625,-8.43869 20.467255,8.21517 -8.37077,20.50288 -7.524154,3.206 3.29489,12.1924 -0.753628,21.35178 -3.979481,9.0032 58.118893,21.04286 49.118253,16.14376"/>
  </g>
  

<use class="sd1" stroke="url(#gradient)" stroke-dasharray="80 610" xlink:href="#loop-normal">

  <animate attributeName="stroke-dashoffset"
      from="80"  to="-610"
      begin="0s" dur="10s"
      
      repeatCount="indefinite"/>  
      
 </use>
 
 
 
 <use class="sd3" stroke="url(#gradient)" stroke-dasharray="80 610" xlink:href="#loop-normal">

  <animate attributeName="stroke-dashoffset"
      from="610"  to="-80"
      begin="0s" dur="10s"
      

      repeatCount="indefinite"/>  
      
      
    
 

      
 </use>
 
 
 

 


</svg>
</div>




</body>
</html>











<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
   sodipodi:docname="circle.svg"
   id="svg11"
   version="1.1"
   viewBox="0 0 340 340"
   height="500"
   width="500">
  


  
  
  
  
  <path
     id="motionPath1"
     fill="none"
     stroke-width="1"
     stroke="#d3d3d3"
     d="m 28.83721,51.162785 c 11.581906,13.999 51.375449,-34.568101 58.518863,-25.97519 11.086356,13.335931 -39.152817,25.16828 -56.587949,57.176361 -12.473282,22.898924 19.931121,-5.088031 40.965492,-7.481448 9.709744,-1.104832 5.196147,14.588434 -7.12222,25.07076 -6.150002,5.233352 7.404541,17.130712 22.836609,13.676212 37.697625,-8.43869 20.467255,8.21517 -8.37077,20.50288 -7.524154,3.206 3.29489,12.1924 -0.753628,21.35178 -3.979481,9.0032 58.118893,21.04286 49.118253,16.14376"/>
     
  <circle
     r="5" fill="red">
    <animateMotion
       calcMode="linear" 
       
keyPoints="0;1;1"
keyTimes="0;0.8;1"

       repeatCount="indefinite"
       dur="15s"
       
       >
      <mpath
         xlink:href="#motionPath1" />
    </animateMotion>

  
  <animate dur="15s" values="#000000; #4e86b1; #4e86b1; transparent" keyTimes="0; 0.5; 0.7; 1" attributeName="fill" repeatCount="indefinite"/>
  
  </circle>
  
  
  
  
  
</svg>
